<template>
  <view class="main">
    <action-bar :options="navOptions" />
    <view class="background"></view>
    <view class="main-sum">
      <view class="name">技术负责人: {{ infoMation.staffName }}</view>
      <view class="sum">
        <view class="sum-box">
          <span class="num">{{ infoMation.totalScore }} 分 </span>
          <span>合计总分</span>
        </view>
        <view class="sum-box">
          <span class="num">{{ infoMation.totalLevel }}</span>
          <span>合计等级</span>
        </view>
      </view>
    </view>

    <view class="main-content">
      <view class="main-content-box" v-for="(item, index) in list" :key="index">
        <view class="top">
          <span class="title">{{ item.staffName }}</span>
          <!-- <span class="time">更新时间:2025-03-03</span> -->
        </view>
        <view class="sum">
          <view class="sum-box">
            <span class="num">{{ item.totalScore }}分</span>
            <span>评价总分</span>
          </view>
          <view class="sum-box">
            <span class="num">{{ item.totalLevel }}</span>
            <span>评价等级</span>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      // 导航栏参数
      navOptions: {
        statusBar: "dark",
        left: {
          icon: "back",
        },
        center: {
          title: "执业评价",
        },
      },
      list: [],
      infoMation: {},
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    getList() {
      let info = uni.getStorageSync("staffId");
      let data = {
        id: info,
      };
      this.$store
        .dispatch("getInstEvaluationsInfo", data)
        .then(({ code, data, msg }) => {
          if (code == 200) {
            this.infoMation = data;
            this.list = data.items;
          }
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f4f5f5;

  .background {
    width: 100%;
    height: 415rpx;
    background-image: url("./image/background.png");
    background-size: 100% 100%;
  }

  &-sum {
    width: calc(100% - 60rpx);
    margin: 0 auto 20rpx;
    font-size: 26rpx;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    box-sizing: border-box;
    padding: 20rpx;
    border-radius: 20rpx;
    overflow: hidden;

    .sum {
      display: flex;
      flex-direction: row;
      align-items: center;

      &-box {
        flex: 1;
        background-color: #f4f5f5;
        height: 140rpx;
        display: inline-block;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 10rpx;
        margin: 20rpx;

        .num {
          font-size: 36rpx;
          font-weight: 700;
          color: #21b37c;
        }
      }
    }

    .name {
      font-size: 34rpx;
    }
  }

  &-content {
    width: calc(100% - 60rpx);
    margin: 0 auto 20rpx;
    border-radius: 20rpx;
    overflow: hidden;

    &-box {
      background-color: #fff;
      border-bottom: 1rpx solid #e5e5e5;

      .top {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .title {
          font-size: 32rpx;
          font-weight: 700;
          color: #fff;
          padding-left: 30rpx;
          line-height: 68rpx;
          width: 372rpx;
          height: 68rpx;
          background-image: url("./image/icon.png");
          background-size: 100% 100%;
          box-sizing: border-box;
        }

        .time {
          font-size: 26rpx;
          width: calc(100% - 372rpx);
          height: 68rpx;
          line-height: 68rpx;
          text-align: right;
          padding-right: 20rpx;
          color: #a8a8a8;
          font-size: 24rpx;
          box-sizing: border-box;
        }
      }

      .sum {
        display: flex;
        flex-direction: row;
        align-items: center;

        &-box {
          flex: 1;
          background-color: #f4f5f5;
          height: 140rpx;
          display: inline-block;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-radius: 10rpx;
          margin: 20rpx;

          .num {
            font-size: 36rpx;
            font-weight: 700;
            color: #21b37c;
          }
        }
      }
    }
  }
}
</style>
